﻿@{
    ViewBag.Title = "TreeView : Working with Client Side Tree Node";
}

<h2>TreeView : Client Side Tree Node</h2>

<h3>Sample</h3>

<div id="divFunctions" style="visibility:hidden;padding-bottom:20px;">
    <div style="padding-bottom:5px;">
        <button id="expandButton" onclick="expandButton_onClick();" style="padding-right:20px;">Expand Developer Tools</button>
        <button id="collapseButton" onclick="collapseButton_onClick();" style="padding-right:20px;">Collapse Developer Tools</button>
    </div>
    <div style="padding-bottom:5px;">
        <button id="highlightButton" onclick="highlightButton_onClick();" style="padding-right:20px;">Highlight Developer Tools</button>
        <button id="unhighlightButton" onclick="unhighlightButton_onClick();" style="padding-right:20px;">Unhighlight Developer Tools</button>
    </div>
    <div style="padding-bottom:5px;">
        <button id="selectButton" onclick="selectButton_onClick();" style="padding-right:20px;">Select ASP.NET MVC</button>
        <button id="deselectButton" onclick="deselectButton_onClick();" style="padding-right:20px;">Deselect ASP.NET MVC</button>
    </div>
</div>

@{
    Html.Telerik().TreeView()
        .Name("MyTreeView")
        .DataBinding(dataBinding => dataBinding
            .Ajax().Select("SelectTreeItems", "TreeView")
        )
        .ClientEvents(events => events.OnDataBound("MyTreeView_OnDataBound"))
        .ShowCheckBox(true)
        .Render();
}

<script type="text/javascript">
    var _devToolsNode=null;
    var _aspNetMvcNode=null;

    MyTreeView_OnDataBound=function (e) {
        $('#divFunctions').css('visibility','visible');
        _devToolsNode=$('#MyTreeView').data('tTreeView').findNodeByText('Developer Tools');
        _aspNetMvcNode=$('#MyTreeView').data('tTreeView').findNodeByValue('2');
    }

    expandButton_onClick=function () {
        _devToolsNode.expand();
    }

    collapseButton_onClick=function () {
        _devToolsNode.collapse();
    }

    highlightButton_onClick=function () {
        _devToolsNode.highlight();
    }

    unhighlightButton_onClick=function () {
        _devToolsNode.unhighlight();
    }

    selectButton_onClick=function () {
        if(_aspNetMvcNode.selected()==false) {
            _aspNetMvcNode.select();
        }
    }

    deselectButton_onClick=function () {
        if(_aspNetMvcNode.selected()) {
            _aspNetMvcNode.deselect();
        }
    }

</script>
